<template>
	<view class="cate_wrap">
		<view class="cate_title">
			<uni-segmented-control :current="current" :values="items.map(item=>item.title)" @clickItem="onClickItem" style-type="text"
			 active-color="red">

			</uni-segmented-control>
		</view>
		<scroll-view scroll-y="true" class="category_box" @scrolltolower="showcase">
			<view class="content" >
				<view class="content_wrap" v-for="(item,index) in category" :key="item.id" @click="showimg(index)">
					<image :src="item.img" mode="widthFix"></image>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		uniBadge,
		uniSegmentedControl
	} from '@dcloudio/uni-ui'
	import request from '../../JS/request.js'
	export default {
		data() {
			return {
				items: [{
						title: "最新",
						order: "new"
					},
					{
						title: "热门",
						order: "hot"
					}
				],
				current: 0,
				id: 0,
				params: {
					limit: 30,
					order: "new",
					skip: 0
				},
				category: []

			}
		},
		methods: {
			onClickItem(e) {
				//锁定前索引
				//this.params.order = this.items[this.current].order
				//请求数据
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
				this.category = []
				this.params.order = this.items[this.current].order
				this.getList()
			},
			async getList() {
				let item = await this.request({
					url: `http://service.picasso.adesk.com/v1/vertical/category/${this.id}/vertical`,
					data: this.params
				})
				if(!this.category){
					this.category = item.data.res.vertical
				}else{
						this.category = [...this.category,...item.data.res.vertical]
				}
				
				
			},
			showimg(index){
				wx.previewImage({
					current:this.category[index].img,
					urls:this.category.map(item=>item.img),
					
				})
			},
			showcase(){
			this.params.skip+=this.params.limit;
			this.getList()
			
			}

		},
		components: {
			uniBadge,
			uniSegmentedControl
		},
		onLoad(opations) {
			this.id = opations.id
			this.getList()
		}
	}
</script>

<style lang="scss">
	.cate_title {
		width: 70%;
		margin: auto;
	}

	.category_box {
		height: calc(100vh - 36px);
		.content {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			.content_wrap {
				width: 32%;
				padding-top: 10rpx;
			}
		}
	}
</style>
